<template>
  <div id="login">
    <div class="login-container">
      <div class="login-content">
        <div id="login-box">
          <p class="login-title">登录</p>
          <form class="login-form">
            <div id="username-input">
              <p>用户名</p>
              <input />
            </div>


            <div id="password-input">
              <p>密码</p>
              <input />
            </div>
          </form>
          <!--            <button class="login-button" >确认</button>-->
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "login_temp",
};
</script>

<style scoped>
#login-box {
}
#login {
  margin: 0;
  padding: 0;
  width: 100vw;
  height: 100vh;
  position: fixed;
  left: 0;
  top: 0;
  /*z-index: 1000;*/
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: rgb(228 239 243);
}
.login-container {
  position: relative;
  width: 30%;
  height: 40%;
}
.login-content {
  position: relative;
  width: 100%;
  height: 100%;
  padding: 0px;
}
.login-content::before {
  content: "";
  background-color: rgb(195 221 239);
  opacity: 0.89;
  position: absolute;
  width: 100%;
  height: 100%;

  filter: blur(3px);
  z-index: -2;
}
#login-box {
  width: 100%;
  height: 100%;
}
.login-title {
  padding: 0;
  font-size: 32px;
  position: relative;
  left: 45%;
  margin: 0;
  top: 10%;
}
.login-form {
  position: relative;
  width: 100%;
  height: 100%;
  top: 20%;
  font-size: 20px;
  line-height: 0;
  padding-left: 20%;
}
.login-button {
  position: relative;
  top: 10%;
}

input {
  outline: none;
  width: 60%;
  height: 26px;
}
#username-input p {
  float: left;
}
#password-input p {
  float: left;
}
</style>
